import React, { useEffect, useState } from "react";
import "./Heroslist.css";
import axios from "axios";
import PubSub from "pubsub-js";
import { useRef } from "react";
import { useNavigate, Link } from "react-router-dom";

export default function Herolist() {
  let [heros, setheros] = useState([]);
  let [name, setname] = useState("");
  let bgcont = useRef(); //背景故事 div
  let [showbg, setshowbg] = useState(false); //展示 状态
  let [order, setorder] = useState(1);

  useEffect(() => {
    PubSub.subscribe("keyword", (msg, data) => {
      console.log(msg, data);
      setname(data);
    });

    async function main() {
      let res = await axios.get(
        `http://api.xiaohigh.com/heros?name_like=${name}`
      );

      setheros(res.data);
    }
    main();
  }, [name]);

  useEffect(() => {
    // if (showbg === true) {
    //   getbg();
    // }
  }, []);

  // let showcont = (index) => {
  //   //点击显示 详细信息

  //   return () => {
  //     setshowbg(true);
  //     setorder(index);
  //   };
  // };

  // let getbg = () => {
  //   bgcont.current.innerHTML = heros[order].intro;
  // };

  // let closediv = () => {
  //   setshowbg(false);
  // };
  const navigate = useNavigate();

  let goHerocon = function (id) {
    return () => {
      // searcParams 方式传参
      // navigate(`/heroscon?id=${id}`);
      // params 传参
      // navigate(`/heroscon/${id}`);

      // location 方式传参
      navigate("/heroscon", { state: { id } });
    };
  };

  return (
    <div className="showheros">
      <span>英雄列表</span>
      <hr />
      <ul className="herolist">
        {heros.map((item) => {
          return (
            <li key={item.id}>
              {/* <Link to={`/heroscon/${item.id}`}> */}
              {/* <Link to={`/heroscon?id=${item.id}`}> */}
              {/* <Link to="/heroscon" state={{ id: item.id }}> */}
              <img
                src={`https://cdn.xiaohigh.com${item.image}`}
                alt=""
                onClick={goHerocon(item.id)}
              />
              {/* </Link> */}
              <h3>
                {item.name}
                &nbsp; &nbsp;
                {item.type}
              </h3>
            </li>
          );
        })}
        {heros.length === 0 ? <h1>未找到该英雄</h1> : ""}
      </ul>
      {showbg && (
        <div className="bg">
          <div className="heros">
            <span className="closebtn">X</span>
            <img
              src={`https://cdn.xiaohigh.com${heros[order].image}`}
              alt="英雄图片"
            />
            <br />
            <span>{heros[order].name}</span>
            <ul className="skill">
              {heros[order].skills.map((item, index) => {
                return (
                  <li key={index}>
                    <img src={`https://cdn.xiaohigh.com${item.img}`} alt="" />
                    <p>{item.name}</p>
                  </li>
                );
              })}
            </ul>
            <div className="bgcont" ref={bgcont}></div>
          </div>
        </div>
      )}
    </div>
  );
}
